<% content_for "header" do %>
<title><%= translate(locale, "Playlists") %> - Invidious</title>
<% end %>

<%= rendered "components/feed_menu" %>

<div class="pure-g h-box">
    <div class="pure-u-1-3">
        <h3><%= translate(locale, "user_created_playlists", %(<span id="count">#{items_created.size}</span>)) %></h3>
    </div>
    <div class="pure-u-1-3">
        <h3 style="text-align:center">
            <a href="/create_playlist?referer=<%= URI.encode_www_form("/feed/playlists") %>"><%= translate(locale, "Create playlist") %></a>
        </h3>
    </div>
    <div class="pure-u-1-3">
        <h3 style="text-align:right">
            <a href="/data_control?referer=<%= URI.encode_www_form("/feed/playlists") %>">
                <%= translate(locale, "Import/export") %>
            </a>
        </h3>
    </div>
</div>

<div class="pure-g">
<% items_created.each do |item| %>
    <%= rendered "components/item" %>
<% end %>
</div>

<div class="pure-g h-box">
    <div class="pure-u-1">
        <h3><%= translate(locale, "user_saved_playlists", %(<span id="count">#{items_saved.size}</span>)) %></h3>
    </div>
</div>

<div class="pure-g">
<% items_saved.each do |item| %>
    <%= rendered "components/item" %>
<% end %>
</div>

<script src="/js/watched_indicator.js"></script>
